import React from 'react';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { Input, Button, List } from 'antd';

const TodoListUI = (props) => {
  return (
    <div style={{margin: '10px'}}>
      <div className="input">
        <Input
          style={{width: '300px', marginRight: '10px'}}
          value={props.inputValue}
          onChange={props.handleInputChange}
        />
        <Button type="primary" onClick={props.handleClick}>提交</Button>
      </div>
      <List
        style={{marginTop: '10px', width: '300px'}}
        bordered
        dataSource={props.list}
        // renderItem={(item, index) => (<List.Item onClick={(index) => {props.handleDelete(index)}}>{item}</List.Item>)}
        renderItem={(item, index) => (<List.Item onClick={() => {props.handleDelete(index)}}>{item}</List.Item>)}
      />
      {/* 子组件调用父组件方法函数时，并传递参数时，可以把方法放在箭头函数中（直接在函数体使用该参数，不需要传入箭头函数）。 */}
    </div>
  )
}

export default TodoListUI;